<template>
	<div class="top">
		<p>修改当前班级信息</p>
		<a @click="back" style="cursor: pointer;">返回</a>
	</div>
	<el-form
	    ref="ruleFormRef"
	    style="max-width: 600px;"
	    :model="formData"
	    :rules="rules"
	    label-width="auto"
	>
		<el-form-item label="班级编号:" prop="className">
			<el-input v-model="formData.clazzId"/>
		</el-form-item>
		<el-form-item label="班级名称:" prop="classRoom">
			<el-select v-model="formData.clazzName">
				<el-option
					v-for="item in classListArr"
					:label="item.clazzName"
					:value="item.clazzName">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="负责人:" prop="teacher">
			<el-select v-model="formData.teaId">
				<el-option
					v-for="item in teachList"
					:label="item.teaName"
					:value="item.teaId">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="上课教室:" prop="classRoom">
			<el-input v-model="formData.clazzRoom"/>
		</el-form-item>
	</el-form>
	<div class="footer">
		<el-button type="info" class="searchBtn" @click="sureFn">确定</el-button>
		<el-button type="info" class="cancelBtn" @click="cancelFn">取消</el-button>
	</div>
</template>

<script setup lang="ts">
	import {ClassList, TeacherList,UpdateClass} from "@/api/wym"
	import {reactive,ref,shallowRef,onMounted,defineEmits,defineProps } from "vue";
	import type { FormInstance,FormRules } from 'element-plus';
	import { ElMessage } from 'element-plus'
	
	const props = defineProps({
		myItem: Object
	});
	// console.log(props.myItem)
	
	// 点击返回
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message');
		// console.log(acIndex)
	}
	// 班级列表
	let classListArr = ref([])
	const classList=async()=>{
		let res=await ClassList({
			pageSize:30,
			pageIndex:1,
		})
		// console.log("班级列表",res)
		classListArr.value=res.data
	}
	
	interface RuleForm {
		clazzId:number,
		clazzName:string,
		clazzRoom:string,
		teaId:string,
	}
	let formData = reactive<RuleForm>({
		clazzId:props.myItem.clazzId,
		clazzName: props.myItem.clazzName,
		clazzRoom: props.myItem.clazzRoom ,
		teaId:Number(props.myItem.teaId)
	})
	
	// 教师列表
	let teachList=ref([])
	const teacherList=async()=>{
		let res=await TeacherList({
			pageIndex:1,
			pageSize:20
		})
		// console.log("教师列表",res)
		teachList.value=res.Tealist
	}
	
	// 点击取消
	const cancelFn=()=>{
		// console.log(props.myItem)
		formData.clazzId=props.myItem.clazzId
		formData.clazzName=props.myItem.clazzName
		formData.clazzRoom=props.myItem.clazzRoom
		formData.teaId=Number(props.myItem.teaId)
	}
	
	// 点击确定
	const sureFn=async()=>{
		// console.log(formData)
		let res=await UpdateClass(formData)
		// console.log("修改",res)
		if(res == 1){
			emit('update-message');
			ElMessage.success({
				message:"修改成功"
			})
		}else{
			ElMessage.error({
				message:"修改失败"
			})
		}
	}
	
	onMounted(()=>{
		classList()
		teacherList()
	})
</script>

<style scoped lang="less">
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		p{
			font-size: 21px;
			font-weight: 600;
		}
		a{
			font-size: 17px;
		}
	}
	.el-form{
		margin-top: 20px;
		.el-input{
			width: 250px;
		}
		.el-select{
			width: 250px;
		}
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
		width: 100px;
	}
	.cancelBtn{
		background-color: #999999;
		width: 100px;
	}
	.footer{
		margin-top: 30vh;
		margin-left: 20px;
	}
</style>